<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>完善资料</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
		<link href="../css/iconfont.css" rel="stylesheet"/>
		<link rel="stylesheet" href="../css/default.css"/>
		<link rel="stylesheet" href="../css/MUIxinyingCss.css"/>
	</head>
	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="personalDataApp" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="personalData" class="mui-page form">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span><!--协议-->
				</button>
				<h1 class="mui-center mui-title">个人资料</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper form_detail_box">
					<div class="mui-scroll">
							<ul class="mui-table-view head_tab_view">
								<li class="mui-table-view-cell">
									<a id="head" class="mui-navigate-right">头像
										<span class="mui-pull-right head">
											<img class="head-img mui-action-preview" id="head-img-1" src=""/>
										</span>
									</a>
								</li>
							</ul>
							<ul class="mui-table-view sel_a_cls">
								 <li class="mui-table-view-cell"><span>昵称：</span><a href="##"class="mui-navigate-right"><input type="text" required="true" class="mui-input-clear" placeholder="匿名" id="you_name" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>地址：</span><a href="##"class="mui-navigate-right"><input type="text" required="true" class="mui-input-clear" placeholder="广州市天河区" id="you_address" readonly="readonly" ></a></li>
						         <li class="mui-table-view-cell"><span>真实姓名：</span><a href="##"class="mui-navigate-right"><input type="text" required="true" class="mui-input-clear" placeholder="忘了" id="you_relay_name" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>性别：</span><a href="#you_sex_sel"class="mui-navigate-right"><input type="text" required="true" class="mui-input-clear" placeholder="女" id="you_sex" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>家族住址：</span><a href="##"class="mui-navigate-right"><input type="text" required="true" class="mui-input-clear" placeholder="棠下村棠安路288号" id="you_family_addr" readonly="readonly"></a></li>
							</ul>
							<ul class="mui-table-view sel_a_cls">
								 <li class="mui-table-view-cell"><span>学历：</span><a href="#you_evo_sel"class="mui-navigate-right"><input type="text" required="true" class="mui-input-clear" placeholder="博士" id="you_evo" readonly="readonly"></a></li>						        
						         <li class="mui-table-view-cell forward_right"><span>职业：</span><a href="##"class="mui-navigate-right"><input type="text" required="true" class="mui-input-clear" placeholder="公司ceo" id="you_company" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>身高：</span><a href="##"class="mui-navigate-right"><input type="text" required="true" class="mui-input-clear" placeholder="170cm" id="you_hei" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>体重：</span><a href="##"class="mui-navigate-right"><input type="text" required="true" class="mui-input-clear" placeholder="68KG" id="you_weig" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>血型：</span><a href="#blood_type_sel"class="mui-navigate-right"><input type="text" required="true" class="mui-input-clear" placeholder="O型" id="blood_type" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>我的病情：</span><a href="#my_condition"class="mui-navigate-right"><input type="text" required="true" class="mui-input-clear" placeholder="" id="you_illness" readonly="readonly"></a></li>						         
							</ul>
					</div>
				</div>
			</div>
		</div>
		<!--单页面结束-->
		<!--用户协议-->
		<div id="my_condition" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">我的病情</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper email_input_box">
					<div class="mui-scroll email_input_sroll">
						<div class="mui-content form">
							<ul class="mui-table-view sel_a_cls">
								 <li class="mui-table-view-cell"><span>患者姓名：</span><a href="##"><input type="text" required="true" class="mui-input-clear" placeholder="匿名" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>职业：</span><a href="##"><input type="text" required="true" class="mui-input-clear" placeholder="销售员" readonly="readonly" ></a></li>
						         <li class="mui-table-view-cell"><span>首次生育年龄：</span><a href="##"><input type="text" required="true" class="mui-input-clear" placeholder="24岁" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>婚姻：</span><a href="#you_sex_sel"><input type="text" required="true" class="mui-input-clear" placeholder="未婚" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>月经史：</span><a href="##"><input type="text" required="true" class="mui-input-clear" value="月经史月经史月经史月经史月经史月经史月经史" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>既往病史：</span><a href="##"><input type="text" required="true" class="mui-input-clear" value="既往病史既往病史既往病史既往病史既往病史" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>家族史：</span><a href="##"><input type="text" required="true" class="mui-input-clear" value="家族史家族史家族史家族史" readonly="readonly" ></a></li>
						         <li class="mui-table-view-cell"><span>个人史：</span><a href="##"><input type="text" class="mui-input-clear" value="个人史个人史个人史个人史个人史" readonly="readonly"></a></li>
						         <li class="mui-table-view-cell"><span>主要病状：</span><a href="#you_sex_sel"><input type="text" class="mui-input-clear" value="不孕不育"></a></li>
							</ul>
							<div class="row mui-input-row illness">
								<h2>主要病情描述：</h2>
								<textarea id="question" class="mui-input-clear question" placeholder="请详细描述你的病情..."></textarea>
							</div>
							<div class="device_img feedback">
								<h3 class="device_img_h">医疗设备截图<a href="##" class="device_img_more">更多》</a></h3>
								<div id='image-list' class="row image-list"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div id="you_sex_sel" class="mui-popover mui-popover-action mui-popover-bottom">
			<h1 class="mui-text-center layer_head">请选择你的性别</h1>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="##">男</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">女</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">保密</a>
				</li>
			</ul>
		</div>
		<div id="you_evo_sel" class="mui-popover mui-popover-action mui-popover-bottom">
			<h1 class="mui-text-center layer_head">请选择你的学历</h1>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="##">大专以下</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">本科</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">研究生</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">博士及以上</a>
				</li>
			</ul>
		</div>
		<div id="blood_type_sel" class="mui-popover mui-popover-action mui-popover-bottom">
			<h1 class="mui-text-center layer_head">请选择你的血型</h1>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="##">O型</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">A型</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">B型</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">AB型</a>
				</li>
			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-1.11.2.min.js"></script>
		<script src="../js/mui.view.js "></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src='../js/feedback.js'></script>
		<script src="../js/feedback-page.js"></script>
	</body>
	<script>
		mui.init();
		//初始化单页view
			var viewApi = mui('#personalDataApp').view({
				defaultPage: '#personalData'
			});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($,doc) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				};
			};
		//选择首次婚育年龄
			mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个菜单
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if(parent.id){
					switch(parent.id){
					case "blood_type_sel":
					document.querySelector("#blood_type").value =a.innerHTML;
					break;
					case "you_evo_sel":
					document.querySelector("#you_evo").value =a.innerHTML;
					break;
					case "you_sex_sel":
					document.querySelector("#you_sex").value =a.innerHTML;
					break;
					default:
					break
					}; 
					//关闭菜单
					mui('#' + parent.id).popover('toggle');
				};
			};
			
		});
		$.ready(function(){
			//三级联示例
			var cityPicker3 = new $.PopPicker({
				layer: 3
			});
			cityPicker3.setData(cityData3);
			var showCityPickerButton = doc.getElementById('you_address');
			//var cityResult3 = doc.getElementById('cityResult3');
			showCityPickerButton.addEventListener('tap', function(event) {
				var _this=this;
				cityPicker3.show(function(items) {
					_this.value = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
					//返回 false 可以阻止选择框的关闭
					//return false;
				});
			}, false);
			});
		})(mui,document);
		//更换头像
		setTimeout(function () {
			defaultImg();
			setTimeout(function() {
				initImgPreview();
			}, 300);
		},500);
		mui(".mui-table-view-cell").on("tap", "#head", function(e) {
			if(mui.os.plus){
				var a = [{
					title: "拍照"
				}, {
					title: "从手机相册选择"
				}];
				plus.nativeUI.actionSheet({
					title: "修改头像",
					cancel: "取消",
					buttons: a
				}, function(b) {
					switch (b.index) {
						case 0:
							break;
						case 1:
							getImage();
							break;
						case 2:
							galleryImg();
							break;
						default:
							break
					}
				})	
			}
			
		});

		function getImage() {
			var c = plus.camera.getCamera();
			c.captureImage(function(e) {
				plus.io.resolveLocalFileSystemURL(e, function(entry) {
					var s = entry.toLocalURL() + "?version=" + new Date().getTime();
					console.log(s);
					//document.getElementById("head-img").src = s;
					document.getElementById("head-img-1").src = s;
					//变更大图预览的src
					//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
					document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(s) {
				console.log("error" + s);
			}, {
				filename: "_doc/head.jpg"
			})
		}

		function galleryImg() {
			plus.gallery.pick(function(a) {
				plus.io.resolveLocalFileSystemURL(a, function(entry) {
					plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
						root.getFile("head.jpg", {}, function(file) {
							//文件已存在
							file.remove(function() {
								console.log("file remove success");
								entry.copyTo(root, 'head.jpg', function(e) {
										var e = e.fullPath + "?version=" + new Date().getTime();
										//document.getElementById("head-img").src = e;
										document.getElementById("head-img-1").src = e;
										//变更大图预览的src
										//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
										document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
									},
									function(e) {
										console.log('copy image fail:' + e.message);
									});
							}, function() {
								console.log("delete image fail:" + e.message);
							});
						}, function() {
							//文件不存在
							entry.copyTo(root, 'head.jpg', function(e) {
									var path = e.fullPath + "?version=" + new Date().getTime();
									//document.getElementById("head-img").src = path;
									document.getElementById("head-img-1").src = path;
									//变更大图预览的src
									//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
									document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
								},
								function(e) {
									console.log('copy image fail:' + e.message);
								});
						});
					}, function(e) {
						console.log("get _www folder fail");
					})
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(a) {}, {
				filter: "image"
			})
		};

		function defaultImg() {
			if(mui.os.plus){
				plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
					var s = entry.fullPath + "?version=" + new Date().getTime();;
					//document.getElementById("head-img").src = s;
					document.getElementById("head-img-1").src = s;
				}, function(e) {
					//document.getElementById("head-img").src = '../images/logo.png';
					document.getElementById("head-img-1").src = '../images/logo.png';
				})
			}else{
				//document.getElementById("head-img").src = '../images/logo.png';
				document.getElementById("head-img-1").src = '../images/logo.png';
			}
			
		}
		document.getElementById("head-img-1").addEventListener('tap', function(e) {
			e.stopPropagation();
		});

		function initImgPreview() {
			var imgs = document.querySelectorAll("img.mui-action-preview");
			imgs = mui.slice.call(imgs);
			if (imgs && imgs.length > 0) {
				var slider = document.createElement("div");
				slider.setAttribute("id", "__mui-imageview__");
				slider.classList.add("mui-slider");
				slider.classList.add("mui-fullscreen");
				slider.style.display = "none";
				slider.addEventListener("tap", function() {
					slider.style.display = "none";
				});
				slider.addEventListener("touchmove", function(event) {
					event.preventDefault();
				})
				var slider_group = document.createElement("div");
				slider_group.setAttribute("id", "__mui-imageview__group");
				slider_group.classList.add("mui-slider-group");
				imgs.forEach(function(value, index, array) {
					//给图片添加点击事件，触发预览显示；
					value.addEventListener('tap', function() {
						slider.style.display = "block";
						_slider.refresh();
						_slider.gotoItem(index, 0);
					});
					var item = document.createElement("div");
					item.classList.add("mui-slider-item");
					var a = document.createElement("a");
					var img = document.createElement("img");
					img.setAttribute("src", value.src);
					a.appendChild(img);
					item.appendChild(a);
					slider_group.appendChild(item);
				});
				slider.appendChild(slider_group);
				document.body.appendChild(slider);
				var _slider = mui(slider).slider();
			}
		}
		
		if(mui.os.stream){
			document.getElementById("check_update").display = "none";
		}
		//修改昵称
		document.getElementById("you_name").addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '确定'];
				var theVal=this.value;
				var _this=this;
				
			
				mui.prompt(' ', theVal, '请输入新昵称', btnArray, function(e) {
					if (e.index == 1) {
						_this.value = e.value;
					} else {
						_this.value = theVal;
					}
				});
			});
//		//输入真实姓名
		document.getElementById("you_relay_name").addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '确定'];
				var theVal=this.value;
				var _this=this;
				mui.prompt(' ', theVal, '请输入您的真实姓名', btnArray, function(e) {
					if (e.index == 1) {
						_this.value = e.value;
					} else {
						_this.value = theVal;
					}
				})
			});
//		//输入家族住址
		document.getElementById("you_family_addr").addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '确定'];
				var theVal=this.value;
				var _this=this;
				mui.prompt(' ', theVal, '请输入您的家族详细地址', btnArray, function(e) {
					if (e.index == 1) {
						_this.value = e.value;
					} else {
						_this.value = theVal;
					}
				})
			});
//		输入职业
document.getElementById("you_company").addEventListener('tap', function(e) {
		e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
		var btnArray = ['取消', '确定'];
		var theVal=this.value;
		var _this=this;
		mui.prompt(' ', theVal, '请输入您的职业', btnArray, function(e) {
			if (e.index == 1) {
				_this.value = e.value;
			} else {
				_this.value = theVal;
			}
		})
	});
//		输入身高
document.getElementById("you_hei").addEventListener('tap', function(e) {
		e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
		var btnArray = ['取消', '确定'];
		var theVal=this.value;
		var _this=this;
		mui.prompt(' ', theVal, '请输入您的身高', btnArray, function(e) {
			if (e.index == 1) {
				_this.value = e.value;
			} else {
				_this.value = theVal;
			}
		})
	});
//		输入身高
document.getElementById("you_weig").addEventListener('tap', function(e) {
		e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
		var btnArray = ['取消', '确定'];
		var theVal=this.value;
		var _this=this;
		mui.prompt(' ', theVal, '请输入您的身高', btnArray, function(e) {
			if (e.index == 1) {
				_this.value = e.value;
			} else {
				_this.value = theVal;
			}
		})
	});
	</script>

</html>